<main>
    <header id="head">
        <div class="custom-search-box">
            <form action="/">
                <van-search v-model="searchVal" show-action placeholder="换季收纳好物特惠" @search="onSearch" @cancel="onCancel"
                    @keyup="showSuggestion($event)" />
            </form>
        </div>
    </header>

    <section class="custom-tagshot-box">
        <h4 class="custom-tagshot-title">热门搜索</h4>
        <div class="custom-tagshot-content">
            <router-link :to="{path:'/searchResult',query:{keyword:tag}}"
                v-for="(tag,index) in this.$store.state.tagsHot" :key="index" class="hot-tag">
                <span class="tag tag-hollow">{{tag}}</span>
            </router-link>
        </div>
    </section>

    <section class="custom-suggestion-box" v-show="isShowSuggestion">
        <ul>
            <router-link :to="{path:'/searchResult',query:{keyword:val}}" tag="li"
                v-for="(val,index) in this.$store.state.suggestionArr" :key="index" @click.native="search($event)">
                {{val}}</router-link>
        </ul>
    </section>

    <section class="custom-history-box" v-if="showHistory">
        <h4 class="custom-history-title">历史记录 <i class="iconfont icon-lajitong fr" @click="clearHistory()"></i></h4>
        <div class="custom-history-content">
            <router-link :to="{path:'/searchResult',query:{keyword:tag}}"
                v-for="(tag,index) in this.$store.state.tagsHistory" :key="index">
                <span class="tag tag-hollow">{{tag}}</span>
            </router-link>
        </div>
    </section>

</main>